import React, { useState, useEffect } from 'react'
import { Line } from '@ant-design/plots';
import { getData } from '../../../api';

type Props = {}

const Index = (props: Props) => {
  const ws = new WebSocket('ws://localhost:8080');
  const [data, setData] = useState([
    { year: '1991', value: 3 },
    { year: '1992', value: 4 },
    { year: '1993', value: 3.5 },
    { year: '1994', value: 5 },
    { year: '1995', value: 4.9 },
    { year: '1996', value: 6 },
    { year: '1997', value: 7 },
    { year: '1998', value: 9 },
    { year: '1999', value: 13 },
  ])

  useEffect(() => {
    getData().then(res => {
      if (res.data.code === 200) {
        setData(res.data.data.echarts);
      }
    })

    ws.onmessage = (e) => {
      console.log(e);
      const res = JSON.parse(e.data);
      console.log(res);
     setData(res.list[0].koa);
    }
  }, [])

  const config = {
    data,
    xField: 'year',
    yField: 'value',
    point: {
      shapeField: 'square',
      sizeField: 4,
    },
    interaction: {
      tooltip: {
        marker: false,
      },
    },
    style: {
      lineWidth: 2,
    },
  };
  return (
    <div>首页
      <Line {...config} />
    </div>
  )
}

export default Index